<script setup>
import { ref, onMounted } from 'vue'
import foter from "@/components/foter.vue"
import home from "@/components/home.vue"
import cases from "@/components/cases.vue"
import team from "@/components/team-strength.vue"
import classroom from "@/components/classroom-learning.vue"
import about from "@/components/About-us.vue"
import { getRequest } from '@/api';
import kefu from "../assets/kefu.png"

const selectedTabIndex = ref(0);
const companys = ref({});
const imgDefultUrl = 'https://www.philhar.cn/upload/swiper/'
const showContent = ref(false);

const tabsItems = [
  { title: "首页" },
  { title: "精选案例" },
  { title: "团队实力" },
  { title: "课堂学习" },
  { title: "关于我们" },
]

const tabsItemClick = (index) => {
  selectedTabIndex.value = index;
}

onMounted(() => {
  constkuRequestIndex();
})

const constkuRequestIndex = () => {
  getRequest('/index_message').then(res => {
    console.log('/index_message', res);
    const { company } = res;
    companys.value = company;
  })
}


// 监听鼠标事件
const onMouseOver = () => {
  console.log('oooo');
  showContent.value = true;
};

const onMouseLeave = () => {
  console.log('pppp');
  showContent.value = false;
};


</script>
<template>
  <div class="home">
    <div class="top">
      <div class="logo">
        <img src="../assets/logo.gif">
      </div>
      <div class="tabs">
        <div v-for="(tab, index) in tabsItems" :key="index" :class="{ 'selected': index === selectedTabIndex }"
          class="tab-item" @click="tabsItemClick(index)">
          {{ tab.title }}
          <div v-if="index === selectedTabIndex" class="indicator"></div>
        </div>
      </div>
    </div>
    <div v-if="selectedTabIndex === 0">
      <home :item="indexArry" />
    </div>
    <div v-if="selectedTabIndex === 1">
      <cases />
    </div>
    <div v-if="selectedTabIndex === 2">
      <team />
    </div>
    <div v-if="selectedTabIndex === 3">
      <classroom />
    </div>
    <div v-if="selectedTabIndex === 4">
      <about />
    </div>




    <div class="levitation-box" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
      <div v-if="!showContent" class="levitation-box-one">
        <img :src="kefu">
      </div>
      <div v-if="showContent" class="qr-code-box">
        <span>扫码添加获取优惠</span>
        <img :src="imgDefultUrl + companys.company_official">
      </div>
    </div>


    <foter :companys="companys" />
  </div>
</template>
<style lang="less" scoped>
.home {
  background: rgba(250, 249, 245, 1);


  .top {
    z-index: 9999999;
    height: 7.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 249, 245, 1);
    position: fixed;

    .logo {
      width: 22.5rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .tabs {
      margin-left: 21.8125rem;
      display: flex;
      height: 100%;
      align-items: center;

      .tab-item {
        position: relative;
        margin: 3.125rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 400;
        transition: background-color 0.3s ease;

        .indicator {
          position: absolute;
          text-align: center;
          width: 6rem;
          height: 2.3125rem;
          background: rgba(243, 160, 72, 1);
          bottom: 2.1875rem;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .levitation-box {
    position: fixed;
    right: .625rem;
    top: 21.875rem;
    z-index: 9999999;

    .levitation-box-btn {
      width: 20.6875rem;
      height: 4.4375rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(250, 249, 245, 1);
      border-radius: 624.9375rem;
      overflow: hidden;
    }

    .qr-code-box {
      width: 21.875rem;
      height: 21.875rem;
      background: rgba(250, 249, 245, 1);
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;

      span {
        font-size: 2.25rem;
        font-weight: 600;
      }

      img {
        width: 14.375rem;
        height: 14.375rem;
      }
    }
  }
}
</style>